//
//  Drawer.swift
//  Music
//
//  Created by liaokylin on 2024/10/4.
//

import SwiftUI

var commonActions: [MenuItem] = [
    MenuItem(id: 4001, icon: "eye", text: "浏览历史"),
    MenuItem(id: 4002, icon: "square.and.pencil", text: "草稿箱"),
    MenuItem(id: 4003, icon: "pencil.and.outline", text: "创作中心"),
    MenuItem(id: 4004, icon: "basket", text: "菜篮子"),
]

var mineActions: [MenuItem] = [
    MenuItem(id: 4004,icon: "video.circle",text: "我的课程"),
    MenuItem(id: 4005,icon: "menucard.fill",text: "订单"),
    MenuItem(id: 4006,icon: "cart",text: "购物车"),
    MenuItem(id: 4007,icon: "chineseyuanrenminbisign.circle",text: "钱包"),
]



var appActions: [MenuItem] = [
    MenuItem(id: 4008,icon: "fork.knife",text: "厨房用具"),
    MenuItem(id: 4009,icon: "gear",text: "设置"),
]



var secondaryColor: Color =
              Color(.init(
                red: 100 / 255,
                green: 174 / 255,
                blue: 255 / 255,
                alpha: 1))

struct menuLink: View {
    var icon: String
    var text: String
    var body: some View {
        HStack {
            Image(systemName: icon)
                .resizable()
                .frame(width: 20, height: 20)
                .foregroundColor(.black.opacity(0.5))
                .padding(.trailing, 18)
            Text(text)
                .foregroundColor(.black)
                .font(.body)
        }
        .onTapGesture {
            print("Tapped on \(text)")
        }
    }
}

struct MenuLinks: View {
    var items: [MenuItem]
    var body: some View {
        VStack(alignment: .leading, spacing: 30) {
            ForEach(items) { item in
                menuLink(icon: item.icon, text: item.text)
            }
        }
        .padding(.vertical, 14)
        .padding(.leading, 8)
    }
}



struct Drawer: View {
    @Binding var isDrawerVisible: Bool
    var body: some View {
        ZStack{
            GeometryReader{ _ in
                EmptyView()
            }
            .background(.black.opacity(0.6))
            .opacity(isDrawerVisible ? 1 : 0)
            .animation(.easeInOut.delay(0.2), value: isDrawerVisible)
            .onTapGesture {
                isDrawerVisible.toggle()
            }
            DrawerMenu(isDrawerVisible: $isDrawerVisible)
        }.edgesIgnoringSafeArea(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
    }
}


struct DrawerMenu: View {
    @Binding var isDrawerVisible: Bool
    
    var sideBarWidth = UIScreen.main.bounds.width * 0.7
    var bgColor: Color =
          Color(.init(
                  red: 247,
                  green: 249,
                  blue: 252,
                  alpha: 1))
    var body: some View {
        ZStack{
            GeometryReader{ _ in
                    EmptyView()
            }
            .background(.black.opacity(0.6))
            .opacity(isDrawerVisible ? 1 : 0)
            .animation(.easeInOut.delay(0.2), value: isDrawerVisible)
            .onTapGesture {
                isDrawerVisible.toggle()
            }
            content
        }.edgesIgnoringSafeArea(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
    }
    
    
    var content: some View {
        
        HStack(alignment: .top){
            ZStack(alignment: .top, content: {
                bgColor
                VStack(alignment: .leading, spacing: 20) {
                  MenuLinks(items: commonActions)
                  Divider()
                  MenuLinks(items: mineActions)
                  Divider()
                  MenuLinks(items: appActions)
               }
              .padding(.top, 80)
              .padding(.horizontal, 40)
            })
            .frame(width: sideBarWidth)
            .offset(x: isDrawerVisible ? 0 : -sideBarWidth)
            .animation(.default, value: isDrawerVisible)
            Spacer()
        }
        
    }
}

